<template>
  <!-- layout分栏布局 -->
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="grid-content ep-bg-purple">
        <div class="leftPic">
          <img src="https://5b0988e595225.cdn.sohucs.com/images/20180803/948207ce59a2489ea96837c8f46f8046.jpeg" alt="">
        </div>
        <div class="rightData">
          <p>热销单品</p>
          <p>你猜</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple">
        <div class="leftPic">
          <img src="https://img0.baidu.com/it/u=2090061382,2060559896&fm=253&fmt=auto&app=120&f=JPEG?w=325&h=260" alt="">
        </div>
        <div class="rightData">
          <p>热销单品</p>
          <p>你猜</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple">
        <div class="leftPic">
          <img src="https://img1.baidu.com/it/u=507516941,3605291616&fm=253&fmt=auto&app=120&f=JPEG?w=720&h=405" alt="">
        </div>
        <div class="rightData">
          <p>热销单品</p>
          <p>你猜</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple">
        <div class="leftPic">
          <img src="https://img0.baidu.com/it/u=721116417,3704773541&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=246" alt="">
        </div>
        <div class="rightData">
          <p>热销单品</p>
          <p>你猜</p>
        </div>
      </div>
    </el-col>
  </el-row>

  <el-row style="">
    <el-col :span="6">
      <el-statistic title="Daily active users" :value="268500" />
    </el-col>
    <el-col :span="6">
      <el-statistic :value="138">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            Ratio of men to women
            <el-icon style="margin-left: 4px" :size="12">
              <Male />
            </el-icon>
          </div>
        </template>
        <template #suffix>/100</template>
      </el-statistic>
    </el-col>
    <el-col :span="6">
      <el-statistic title="Total Transactions" :value="172000" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="Feedback number" :value="562">
        <template #suffix>
          <el-icon style="vertical-align: -0.125em">
            <ChatLineRound />
          </el-icon>
        </template>
      </el-statistic>
    </el-col>
  </el-row>

  <el-button type="danger" @click="disappeariPhone" style="margin-bottom: 15px;">点击按钮：Let iPhone Disappeared!</el-button>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div style="display: flex;">
    <div ref="chart2_pie" style="width: 580px; height:400px;"></div>
    <div ref="chart1" style="width: 540px; height:400px;"></div>
  </div>
    <div style="display: flex">
    <!-- 地图 -->
    <div style="width:580px;height:600px" ref="chartsDOM"></div>
    <!-- 地图 -->
    <div class="drawStation">
      <div id="draw-station-container">
        <p></p>
        <div class="input">
          <el-input v-model="location.lng" size="small" placeholder="经度" />
          <el-input v-model="location.lat" size="small" placeholder="纬度" />
          <el-input v-model="location.address" size="small" placeholder="搜索地址" />
        </div>
      </div>
    </div>
</div>
</template>

<script>
import * as echarts from 'echarts'
import getShuShanMap from '../../api/getShuShanMap.js'
import AMapLoader from '@amap/amap-jsapi-loader'
// 设置安全密钥
// window._AMapSecurityConfig = {
//   securityJsCode: '安全密钥'
// }

export default {
  name: 'DashBoard',
  data () {
    return {
      chart1: null, // 所有数据定义变量相关放入data，其它放入methods
      chart2_pie: null,
      // ditu
      // 地图对象
      AMap: null,
      // 地图实例对象
      map: null,
      marker: null,
      // 经纬度
      location: {
        lat: '',
        lng: '',
        address: ''
      }
    }
  },
  methods: {
    initChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart2 = echarts.init(this.$refs.chart2_pie)
      const myChart = echarts.init(this.$refs.chart1)

      this.chart1 = myChart
      this.myChart2 = myChart2 // 仅此次需要使用，后期不再特殊配置此项

      // 仅此次需要使用，后期不再特殊配置此项
      // 绘制图表  指定图表的配置项和数据
      // myChart.setOption({ 此处修改为下
      const option1 = {
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        title: {
          text: '热销单品',
          textStyle: {
            color: 'black'
          },
          left: 'center'
        },
        tooltip: {},
        xAxis: {
          name: '单品名称',
          data: ['huaWei', 'xiaoMi', 'oppo', 'vivo', 'samsung', 'iPhone', 'others'],
          nameRotate: '45',
          axisLabel: { rotate: '45' }
        },
        yAxis: {
          name: '单品销量'
        },
        legend: { left: 'left' },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5459, 6698, 5456, 5245, 1257, 1590, 3200]
          }, {
            name: '单价',
            type: 'line',
            data: [4500, 1999, 2300, 2210, 450, 900, 1500]
          }
        ]
      }
      const option2 = {
        title: {
          text: '10年后手机销量总榜',
          subtext: '11.11当天',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 10350, name: 'huaWei' },
              { value: 10480, name: 'xiaoMi' },
              { value: 8800, name: 'oppo' },
              { value: 7840, name: 'vivo' },
              { value: 2220, name: 'iPhone' },
              { value: 2200, name: 'samsung' },
              { value: 4000, name: 'others' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。 修改添加的
      myChart.setOption(option1)
      myChart2.setOption(option2)
    },
    // 外部按钮控制图表某一项的状态 控制指定数据消失隐藏 action.legend行为
    disappeariPhone () {
      this.myChart2.dispatchAction({
        type: 'legendToggleSelect',

        // 用 index 或 id 或 name 来指定系列。
        // 可以使用数组指定多个系列。
        seriesName: 'Access From',
        // 可选，数据项名称，在有 dataIndex 的时候忽略
        name: 'iPhone'
      })
    },
    // 地图
    /**
     * 创建地图
     */
    initMap () {
      AMapLoader.load({
        key: 'f351b2dbe8298a34ecc57331f2e212ee', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.AMap = AMap
          this.map = new AMap.Map('draw-station-container', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 15, // 初始化地图级别
            center: [117.286978, 31.850421], // 初始化地图中心点位置
            mapStyle: 'amap://styles/normal' // 设置地图的显示样式
          })

          this.marker = new AMap.Marker({
            position: new AMap.LngLat(117.286978, 31.850421),
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 添加 Icon 图标 URL
            title: '合肥市包河区'
          })
          this.map.add(this.marker)
          // 移除已创建的 marker
          //   this.map.remove(marker)

          // 地图点击事件
          this.map.on('click', this.clickMapHandler)
        })
        .catch((e) => {
          console.log(e)
        })
    },
    // 点击地图事件
    clickMapHandler (e) {
      this.location.lng = e.lnglat.getLng()
      this.location.lat = e.lnglat.getLat()
      this.map.remove(this.marker)
      AMapLoader.load({
        key: 'afae044d3e5f5e49b0e06421d2666b7c', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.AMap = AMap
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 添加 Icon 图标 URL
          title: '合肥市包河区'
        })
        this.map.add(this.marker)
        // 移除已创建的 marker
        // this.map.remove(marker)
      })
    }
  },
  mounted () {
    // mounted或者created（有dom相关操作用mounted；没有则用created）
    // 调用方法 生成图标
    this.initChart()
    // 地图1
    // 初始化统计图对象
    const myChart = echarts.init(this.$refs.chartsDOM)
    // 显示 loading 动画
    myChart.showLoading()
    // 再得到数据的基础上，进行地图绘制
    getShuShanMap.then(res => {
      // 得到结果后，关闭动画
      myChart.hideLoading()
      // 注册地图(数据放在axios返回对象的data中哦)
      echarts.registerMap('ShuShan', res.data)
      const option = {
        series: [
          {
            name: '蜀山区地图',
            type: 'map',
            map: 'ShuShan', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
              show: true
            }
          }
        ]
      }
      myChart.setOption(option)
    })
    // DOM初始化完成进行地图初始化
    this.initMap()
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 30px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  text-align: center;
}
.grid-content {
  border-radius: 4px;
  min-height: 100px;
  background-color:#ccc;
  color:rgb(216, 65, 65);
  display: flex;
  justify-content: space-around;
  align-items: center;
  img{
    width: 40px;
    height: 40px;
  }
}
.drawStation #draw-station-container {
    padding: 0px;
    /* margin: 20px 0 20px 0; */
    margin: 20px auto;
    width: 540px;
    height: 600px;
}

.el-input {
    width: 150px;
    margin: 10px 0 0 10px;
    z-index: 5;
    border: 1px solid #ccc;
    border-radius: 4px;

}
</style>
